<template>
  <view>
    <!-- 商品轮博图部分 -->
    <swiper class="good-container" indicator-dots=true autoplay="true" duration="2000" circular="true">
      <swiper-item v-for="(item,index) in goodsInfo.pics" class="banner-item">
        <image :src="item.bigPic" @click="preview(index)"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息区域 -->
    <view class="good-info">
      <view>{{goodsInfo.goods_name}}</view>
      <view class="price">¥{{goodsInfo.goods_price}}</view>
      <view>{{goodsInfo.goods_shopAddress}}</view>
      <view>联系客服</view>
    </view>
    <view class="good-attr">
      <view>商品详细图示区域</view>
      <image :src="goodsInfo.goodAttr.pic1"></image>
      <image :src="goodsInfo.goodAttr.pic2"></image>
      <image :src="goodsInfo.goodAttr.pic3"></image>
      <image :src="goodsInfo.goodAttr.pic4"></image>
      <image :src="goodsInfo.goodAttr.pic5"></image>
    </view>

    <!-- 底部商品导航部分 -->
    <view class="good-nav">
      <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
    </view>

  </view>
</template>

<script>
import {mapState,mapGetters,mapMutations} from 'vuex'
export default {
  computed:{
    ...mapState('m_cart',['cart']),
    ...mapGetters('m_cart',['total'])
  },
  // 监听器 监听新值赋值给info
  watch:{
    // 页面一加载进来就立即调用的写法
    total:{
      handler:function(newValue){
        const findResult=this.options.find(item=>item.text==="购物车")
        if(findResult){
          findResult.info=newValue
        }
      },
      immediate:true
    }
  },
  data() {
    return {
      options: [{
        icon: 'headphones',
        text: '客服'
      }, {
        icon: 'shop',
        text: '店铺',
        info: 2,
        infoBackgroundColor:'#007aff',
        infoColor:"red"
      }, {
        icon: 'cart',
        text: '购物车',
        info: 0
      }],
      buttonGroup: [{
        text: '加入购物车',
        backgroundColor: '#ff0000',
        color: '#fff'
      },
        {
          text: '立即购买',
          backgroundColor: '#ffa200',
          color: '#fff'
        }
      ],
      // 定义商品详情信息对象
      goodsInfo:{}
    };
  },
  methods:{
    ...mapMutations('m_cart',['addToCart']),
    async getGoodDetail(goodId){
      const res=await uni.$http.get('/detail',{"goodId":goodId});
      const {data,status}=res.data
      if(status!=200){
        return uni.showToast({
          title:'加载数据失败',
          duration:1000,
          icon:'none'
        })
      }else{
        this.goodsInfo=data
      }
    },
    // 预览图片
    preview(index) {
      const arr = this.goodsInfo.pics.map(item => item.bigPic);

      uni.previewImage({
        urls: arr,
        current: index
      });
      // console.log(index)
    },
    onClick(e){
      if(e.content.text==='购物车'){
        uni.switchTab({
          url:"/pages/shop/shop"
        })
      }
    },
      // 添加到购物车
    buttonClick(e){
      if(e.content.text==='加入购物车'){
      // 定义新商品信息
        const goods={
          goods_id:this.goodsInfo.goods_id,
          goods_name:this.goodsInfo.goods_name,
          goods_price:this.goodsInfo.goods_price,
          goods_count:1,
          goods_small_logo:this.goodsInfo.goods_small_logo,
          goods_state:true
        }
        this.addToCart(goods)
      }
    }

  },
  onLoad(){
    this.getGoodDetail()
  }
}
</script>

<style lang="scss">
/* 商品轮播图部分样式 */
.good-container {
  height: 600rpx;
  .banner-item {
    width: 100%;
    height: 600rpx;
    image {
      width: 100%;
      height: 100%;
      object-fit: cover; // 保持图片比例并裁剪以适应容器
    }
  }
}

/* 商品信息区域样式 */
.good-info {
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
  margin: 20rpx;
  .price {
    color: #FF5A5F;
    font-size: 36rpx;
    font-weight: bold;
  }
  view {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #333;
  }
}

/* 商品属性区域样式 */
.good-attr {
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
  margin: 20rpx;
  image {
    width: 100%;
    display: block; // 取消图片底部的空白间隙
    margin-bottom: 10rpx;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
}

/* 底部商品导航部分样式 */
.good-nav {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 10rpx 20rpx;
  justify-content: space-between;
  align-items: center;

}
</style>

